Component({
	properties: {
		maskBg: {
			type: String,
			value: 'rgba(0,0,0,0)'
		},
		placement: {
			type: String,
			value: 'default', //default top-start top-end bottom-start bottom-end 
			observer: () => {
				this.dynPlace = newVal
			}
		},
		direction: {
			type: String,
			value: 'column' //column row
		},
		x: {
			type: Number,
			value: 0
		},
		y: {
			type: Number,
			value: 0
		},
		value: {
			type: Boolean,
			value: false,
			observer: async function (newVal, oldVal) {
				if (newVal) await this.popupsPosition()
				this.show = newVal
			}
		},
		popData: {
			type: Array,
			value: () => []
		},
		theme: {
			type: String,
			value: 'light' //light dark
		},
		dynamic: {
			type: Boolean,
			value: false
		},
		gap: {
			type: Number,
			value: 20
		},
		triangle: {
			type: Boolean,
			value: true
		}
	},
	data: {
		popupsTop: '0px',
		popupsLeft: '0px',
		show: false,
		dynPlace: ''
	},
	attached() {
		this.popupsPosition()
	},
	methods: {
		tapMask() {

			this.$emit('input', !this.value)
		},
		tapItem(item) {
			if (item.disabled) return
			this.$emit('tapPopup', item)
			this.$emit('input', !this.value)
		},
		getStatusBar() {
			let promise = new Promise((resolve, reject) => {
				wx.getSystemInfo({
					success: function (e) {

						let customBar
						// #ifdef H5

						customBar = e.statusBarHeight + e.windowTop;

						// #endif
						resolve(customBar)
					}
				})
			})
			return promise
		},
		async popupsPosition() {
			let statusBar = await this.getStatusBar()
			let promise = new Promise((resolve, reject) => {
				let popupsDom = wx.createSelectorQuery().in(this).select(".popups")
				popupsDom.fields({
					size: true,
				}, (data) => {
					let width = data.width
					let height = data.height

					let y = this.dynamic ? this.dynamicGetY(this.y, this.gap) : this.transformRpx(this.y)

					let x = this.dynamic ? this.dynamicGetX(this.x, this.gap) : this.transformRpx(this.x)


					// #ifdef H5
					y = this.dynamic ? (this.y + statusBar) : this.transformRpx(this.y + statusBar)
					// #endif 

					this.dynPlace = this.placement == 'default' ? this.getPlacement(x, y) : this.placement

					switch (this.dynPlace) {
						case 'top-start':
							this.popupsTop = `${y + 9}px`
							this.popupsLeft = `${x - 15}px`
							break;
						case 'top-end':
							this.popupsTop = `${y + 9}px`
							this.popupsLeft = `${x + 15 - width}px`
							break;
						case 'bottom-start':
							this.popupsTop = `${y - 18 - height}px`
							this.popupsLeft = `${x - 15}px`
							break;
						case 'bottom-end':
							this.popupsTop = `${y - 9 - height}px`
							this.popupsLeft = `${x + 15 - width}px`
							break;
					}
					resolve()
				}).exec();

			})
			return promise

		},
		getPlacement(x, y) {
			let width = wx.getSystemInfoSync().windowWidth
			let height = wx.getSystemInfoSync().windowHeight
			if (x > width / 2 && y > height / 2) {
				return 'bottom-end'
			} else if (x < width / 2 && y < height / 2) {
				return 'top-start'
			} else if (x > width / 2 && y < height / 2) {
				return 'top-end'
			} else if (x < width / 2 && y > height / 2) {
				return 'bottom-start'
			} else if (x > width / 2) {
				return 'top-end'
			} else {
				return 'top-start'
			}
		},
		dynamicGetY(y, gap) {

			let height = wx.getSystemInfoSync().windowHeight
			y = y < gap ? gap : y
			y = height - y < gap ? (height - gap) : y

			return y
		},
		dynamicGetX(x, gap) {
			let width = wx.getSystemInfoSync().windowWidth
			x = x < gap ? gap : x
			x = width - x < gap ? (width - gap) : x
			return x
		},
		transformRpx(params) {
			return params * wx.getSystemInfoSync().screenWidth / 375
		}
	},
	watch: {
		value: {
			immediate: true,
			handler: async function (newVal, oldVal) {
				if (newVal) await this.popupsPosition()
				this.show = newVal
			}
		},
		placement: {
			immediate: true,
			handler(newVal, oldVal) {
				this.dynPlace = newVal
			}
		}
	}
})